<template>
	<div class="ranking">
		<div class="rankingImg">
			<div class="imgBox">
				<img src="../../../assets/images/ranking.jpg" alt="" />
			</div>
			<span>那些荣获奥斯卡的LGBT电影</span>
		</div>
		<div class="rankingTop">
			<div class="rankingBox">
				<div>
					<img src="../../../assets/images/time.png" alt="">
				</div>
				<span>时光Top100</span>
			</div>
			<div class="rankingBox">
				<div>
					<img src="../../../assets/images/Chinese.png" alt="">
				</div>
				<span>华语Top100</span>
			</div>
			<div class="rankingBox">
				<div>
					<img src="../../../assets/images/Global.png" alt="">
				</div>
				<span>全球票房榜</span>
			</div>
		</div>
		<div class="rankingCont">
			<div class="rankingContLeft">
				<div class="cont1">昆汀·塔伦蒂诺个人推荐私宠电影Top20</div>
				<div class="cont2">昆汀也是一个狂热的影迷</div>
			</div>
			<i class="iconfont icon-you"></i>
		</div>
	</div>
</template>

<script>
	export default {
		name: "ranking",
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';
	.ranking{
		.rankingImg{
			width: 100%;
			position: relative;
			.imgBox{
				img{
					width: 100%;
					height: vw(220);
				}
			}
			span{
				position: absolute;
				bottom: vw(0);
				width: 100%;
				height: vw(50);
				line-height: vw(50);
				font-size: vw(20);
				text-align: center;
				background: #000;
				color: #fff;
				background: rgba(0,0,0,.4);
			}
		}
		.rankingTop{
			width: 100%;
			height: vw(140);
			display: flex;
			justify-content: space-around;
			align-items: center;
			.rankingBox{
				text-align: center;
				>div{
					padding-bottom: vw(10);
					img{
						width: vw(60);
						height: vw(60);
					}
				}
				span{
					font-size: vw(14);
				}
				&:nth-child(1){
					color: #1498c9;
				}
				&:nth-child(2){
					color: #3bc7c2;
				}
				&:nth-child(3){
					color: #ffc12d;
				}
			}
		}
		.rankingCont{
			width: 100%;
			height: vw(90);
			border-top: 1px solid #ccc;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.rankingContLeft{
				.cont1{
					font-size: vw(18);
				}
				.cont2{
					font-size: vw(16);
					color: #666;
				}
			}
			i{
				font-size: vw(22);
				color: #ccc;
			}
		}
	}
</style>
